<!--
文档管理界面
-->
<!DOCTYPE html>
<html>
<head>
    <title>ManaGement PlatForm</title>
    <!--    <#include  "/home.html">-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta name="_csrf" content="2a049f84-561c-44bf-ae25-f24fbf78b313">
    <meta name="_csrf_header" content="X-CSRF-TOKEN">
    <script src="/wedding_admin/js/common.js"></script>
    <script src="/wedding_admin/js/jquery.min.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.all.min.js"></script>
    <script src="/wedding_admin/js/jszip.min.js"></script>
    <script src="/wedding_admin/js/um/respond.min.js"></script>
    <script src="/wedding_admin/js/um/es5-shim.min.js"></script>

    <script src="/wedding_admin/js/kendo/kendo.culture.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.messages.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.hap.js?v=20180330"></script>
    <script src="/wedding_admin/js/um/moment.min.js"></script>
    <script src="/wedding_admin/js/um/daterangepicker.js"></script>
    <script src="/wedding_admin/js/layui/lay/dest/layui.all.js"></script>

    <script src="/wedding_admin/js/vue_table/vue.min.js"></script>
    <script src="/wedding_admin/js/vue_table/vue-validator.min.js"></script>

    <script src="/wedding_admin/js/treegrid/tree.table.js"></script>
    <script src="/wedding_admin/js/treegrid/jquery.treegrid.extension.js"></script>
    <script src="/wedding_admin/js/treegrid/jquery.treegrid.min.js"></script>
    <script src="/wedding_admin/js/ztree/jquery.ztree.all.min.js"></script>

    <link href="/wedding_admin/statics/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="/wedding_admin/statics/css/simple-line-icons.min.css" rel="stylesheet" type="text/css">
    <link href="/wedding_admin/css/ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.hap.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/daterangepicker.css" rel="stylesheet">

    <link href="/wedding_admin/statics/css/toastr.min.css" rel="stylesheet" type="text/css">
</head>


<style>

    .nav > li > a:focus, .nav > li > a:hover {
        background-color: inherit !important;
    }

    .nav > li > a:focus, .nav > li > a:hover {
        background-color: inherit !important;
    }

    #mainTab .k-tabstrip-items li {
        position: relative;
        display: inline-block;
        cursor: pointer;
        height: auto !important;
        min-width: 70px;
        text-align: center;
    }

    #mainTab .k-tabstrip-items li span.k-link {
        background: 0 0 !important;
        border: 0;
        margin: 0;
        color: #678098;
        display: block;
        padding: 10px 20px;
    }

    #mainTab .k-tabstrip-items li:hover {
        background-color: #f2f6f9;
        border-top: 3px solid #f2f6f9 !important;
    }

    #mainTab .k-tabstrip-items li:hover span.k-link {
        color: #5b9bd1;
    }

    #mainTab .k-tabstrip-items li.k-state-active {
        background: 0 0;
        margin: 0;
        position: relative;
        background-color: #e9ecf3;
        cursor: default;
        border-top: 3px solid #5C9ACF !important;
        border-bottom-color: transparent;
        height: auto !important;
    }

    #mainTab .k-tabstrip-items li.k-state-active span.k-link {
        color: #5b9bd1;
        display: block;
        padding: 10px 20px;
    }

    #mainTab .k-tabstrip-items {
        width: 100%;
        /*  border-bottom: 1px solid #ddd;*/
        margin: 0px !important;
        background-color: #fff;
        list-style-type: none;
        position: relative;
        /* vertical-align: top;*/
        white-space: nowrap;
        padding: 0px;
        overflow: hidden;
    }



    #mainTab > .k-content {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    #mainTab .k-tabstrip-items .k-state-default.k-state-hover .k-i-close {
        visibility: visible;
    }

    #mainTab .k-tabstrip-prev, #mainTab .k-tabstrip-next {
        top: 2px;
        background-color: #fff !important;
        display: inline-block !important;
    }

    #mainTab .k-i-arrow-w:hover, .k-i-arrow-e:hover {
        color: #36c6d3;
    }

    #mainTab .k-i-arrow-w {
        position: absolute;
        background-color: #fff;
        text-align: center;
    }

    #mainTab .k-i-arrow-e {
        position: absolute;
        background-color: #fff;
        text-align: center;
    }

    .k-tabstrip-wrapper .k-content iframe {
        height: 100%;
        width: 100%;
        padding: 0px;
    }



    .tabstrip-context-menu .k-item {
        height: 22px;
        line-height: 22px;
    }

    .tabstrip-context-menu .k-item:hover {
        background-color: #f2f6f9;
    }

    .tabstrip-context-menu .k-item .k-link {
        padding: 0px 42px 0px 25px;
    }



    #search-fld_listbox li {
        padding: 5px 10px;
        cursor: pointer;
    }

    #search-fld_listbox li.k-state-focused, #search-fld_listbox li.k-state-hover {
        background-color: #606683;
    }


    #search-fld-list .slimScrollDiv {
        margin-top: 9px;
    }

    #search-fld-list .slimScrollDiv .slimScrollBar {
        border-radius: 6px !important;
    }


    .form-group > .col-sm-4 {
        padding: 0;
    }


</style>
<body>


<div class="page-container">
    <!--小导航-->
    <div class="col-sm-2">
    <div class="page-sidebar-wrapper">
        <div class="page-sidebar navbar-collapse collapse" id="app">
            <ul id="page-sidebar-menu" class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="false"
                data-slide-speed="200">

            </ul>
        </div>
    </div>
    </div>
    <!---->

    <div class="col-sm-10">
    <div id="rrapp" v-cloak>
        <div class="pull-left" id="query-reset" style="padding-bottom:10px;">

            <a id="queryInfo" class="btn btn-success" style="float:left;margin-right:5px;"
               @click="add"><i class="fa fa-plus-square" style="margin-right:3px;"></i>添加</a>
            <a id="updateInfo" class="btn btn-primary" style="float:left;margin-right:5px;"
               @click="update"><i class="fa fa-plus-square" style="margin-right:3px;"></i>编辑</a>
            <a id="deteleInfo" class="btn btn-danger" style="float:left;margin-right:5px;"
               @click="del"><i class="fa fa-plus-square" style="margin-right:3px;"></i>删除</a>
        </div>
        <table id="menuTable" data-mobile-responsive="true" data-click-to-select="true">
            <thead>
            <tr>
                <th data-field="selectItem" data-checkbox="true"></th>
            </tr>
            </thead>
        </table>
        <div v-show="!showList" class="panel panel-default">
            <div class="panel-heading">{{title}}</div>
            <form class="form-horizontal">
                <div class="form-group">
                    <div class="col-sm-2 control-label">类型</div>
                    <label class="radio-inline">
                        <input type="radio" name="type" value="0" v-model="door.type"/> 目录
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="type" value="1" v-model="door.type"/> 菜单
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="type" value="2" v-model="door.type"/> 按钮
                    </label>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">菜单名称</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="door.name" placeholder="菜单名称或按钮名称"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">上级菜单</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" style="cursor:pointer;"
                               v-model="door.parentName" @click="doorTree" readonly="readonly"
                               placeholder="一级菜单"/>
                    </div>
                </div>
                <div v-if="door.type == 1" class="form-group">
                    <div class="col-sm-2 control-label">菜单URL</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="door.url" placeholder="菜单URL"/>
                    </div>
                </div>
                <div v-if="door.type == 1 || door.type == 2" class="form-group">
                    <div class="col-sm-2 control-label">授权标识</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="door.perms"
                               placeholder="多个用逗号分隔，如：user:list,user:create"/>
                    </div>
                </div>
                <div v-if="door.type != 2" class="form-group">
                    <div class="col-sm-2 control-label">排序号</div>
                    <div class="col-sm-10">
                        <input type="number" class="form-control" v-model="door.orderNum" placeholder="排序号"/>
                    </div>
                </div>
                <div v-if="door.type != 2" class="form-group">
                    <div class="col-sm-2 control-label">图标</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="door.icon" placeholder="菜单图标"/>
                        <code style="margin-top:4px;display: block;">获取图标：http://www.fontawesome.com.cn/faicons/</code>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label"></div>
                    <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
                    &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
                </div>
            </form>
        </div>
    </div>
    </div>
</div>

<!-- 选择菜单 -->
<div id="doorLayer" style="display: none;padding:10px;">
    <ul id="doorTree" class="ztree"></ul>
</div>


</div>

<script>
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "doorId",
                pIdKey: "parentId",
                rootPId: -1
            },
            key: {
                url: "nourl"
            },
            doorList: {}
        }
    };
    var ztree;

    var vm = new Vue({
        el: '#rrapp',
        data: {
            showList: true,
            title: null,
            door: {
                parentName: null,
                parentId: 0,
                type: 1,
                orderNum: 0
            }
        },
        methods: {
            getMenu: function (menuId) {
                debugger;

                $.ajax({
                    type: "POST",
                    url: "/wedding_admin/sys/sysdoor/select",
                    contentType: "application/json",
                    success: function (r) {

                        ztree = $.fn.zTree.init($("#doorTree"), setting, r.doorList);
                        var node = ztree.getNodeByParam("doorId", vm.door.parentId);
                        ztree.selectNode(node);

                        vm.door.parentName = node.name;
                    }
                });

            },
            add: function () {
                vm.showList = false;
                vm.title = "新增";
                vm.door = {parentName: null, parentId: 0, type: 1, orderNum: 0};
                vm.getMenu();
            },
            update: function () {
                var doorId = getMenuId();
                if (doorId == null) {
                    return;
                }

                $.get("/wedding_admin/sys/sysdoor/info/" + doorId, function (r) {
                    vm.showList = false;
                    vm.title = "修改";
                    vm.door = r.door;
                    vm.getMenu();
                });


            },
            del: function () {
                var doorId = getMenuId();
                if (doorId == null) {
                    return;
                }


                var rs = confirm('确定要删除选中的记录？');
                if (rs) {

                    $.ajax({
                        type: "POST",
                        url: "/wedding_admin/sys/sysdoor/delete",
                        data: "doorIds=" + doorId,
                        success: function (r) {
                            if (r.code === 0) {
                                alert('操作成功');
                                vm.reload();

                            } else {
                                alert(r.msg);
                            }
                        }
                    });

                }
            },
            saveOrUpdate: function () {
                if (vm.validator()) {
                    return;
                }

                var url = vm.door.doorId == null ? "/wedding_admin/sys/sysdoor/save" : "/wedding_admin/sys/sysdoor/update";
                $.ajax({
                    type: "POST",
                    url: url,
                    contentType: "application/json",
                    data: JSON.stringify(vm.door),
                    success: function (r) {
                        if (r.code === 0) {
                            alert('操作成功');
                            vm.reload();
                            jQuery("#doorLayer").hide();//隐藏

                        } else {
                            alert(r.msg);
                        }
                    }
                });
            },
            doorTree: function () {

                layer.open({
                    type: 1,
                    offset: '50px',
                    skin: 'layui-layer-molv',
                    title: "选择菜单",
                    area: ['300px', '450px'],
                    shade: 0,
                    shadeClose: false,
                    content: jQuery("#doorLayer"),
                    btn: ['确定', '取消'],
                    btn1: function (index) {
                        var node = ztree.getSelectedNodes();
                        //选择上级菜单
                        vm.door.parentId = node[0].doorId;
                        vm.door.parentName = node[0].name;

                        layer.close(index);
                    }
                });
            },
            reload: function () {
                vm.showList = true;
                Menu.table.refresh();
                jQuery("#doorLayer").hide();//隐藏
            },
            validator: function () {
                if (isBlank(vm.door.name)) {
                    alert("菜单名称不能为空");
                    return true;
                }

                //菜单
                if (vm.door.type === 1 && isBlank(vm.door.url)) {
                    alert("菜单URL不能为空");
                    return true;
                }
            }
        }
    });


    var Menu = {
        id: "menuTable",
        table: null,
        layerIndex: -1
    };

    /**
     * 初始化表格的列
     */
    Menu.initColumn = function () {
        var columns = [
            {field: 'selectItem', radio: true},
            {title: '菜单ID', field: 'doorId', visible: false, align: 'center', valign: 'middle', width: '120px'},
            {title: '菜单名称', field: 'name', align: 'center', valign: 'middle', sortable: true, width: '140px'},
            {
                title: '上级菜单', field: 'parentName', align: 'center', valign: 'middle', sortable: true, width: '100px',
                formatter: function (item, index) {
                    return item.parentName == null ? '' : item.parentName;
                }
            },
            {
                title: '图标', field: 'icon', align: 'center', valign: 'middle', sortable: true, width: '80px',
                formatter: function (item, index) {
                    return item.icon == null ? '' : '<i class="' + item.icon + ' fa-lg"></i>';
                }
            },
            {
                title: '类型',
                field: 'type',
                align: 'center',
                valign: 'middle',
                sortable: true,
                width: '100px',
                formatter: function (item, index) {
                    if (item.type === 0) {
                        return '<span class="label label-primary">目录</span>';
                    }
                    if (item.type === 1) {
                        return '<span class="label label-success">菜单</span>';
                    }
                    if (item.type === 2) {
                        return '<span class="label label-warning">按钮</span>';
                    }
                }
            },
            {title: '排序号', field: 'orderNum', align: 'center', valign: 'middle', sortable: true, width: '100px'},
            {
                title: '菜单URL', field: 'url', align: 'center', valign: 'middle', sortable: true, width: '160px',
                formatter: function (item, index) {
                    return item.url == null ? '' : item.url;
                }
            },
            {
                title: '授权标识', field: 'perms', align: 'center', valign: 'middle', sortable: true,
                formatter: function (item, index) {
                    return item.perms == null ? '' : item.perms;
                }
            }]
        return columns;
    };


    function getMenuId() {
        var selected = $('#menuTable').bootstrapTreeTable('getSelections');
        if (selected.length == 0) {
            alert("请选择一条记录");
            return null;
        } else {
            return selected[0].id;
        }
    }


    $(function () {
        init();
        var colunms = Menu.initColumn();
        var table = new TreeTable(Menu.id, "/wedding_admin/sys/sysdoor/list", colunms);
        table.setExpandColumn(2);
        table.setIdField("doorId");
        table.setCodeField("doorId");
        table.setParentCodeField("parentId");
        table.setExpandAll(false);
        table.init();
        Menu.table = table;
    });

    //菜单
    function loadMenu() {
        $.ajax({
            type: 'GET',
            url: '/wedding_admin/sys/sysmenu/nav',
            contentType: "application/json; charset=utf-8",
            success: function (datas) {
                var html = ['<li class="nav-item start active"><a id="link_home" href="javascript:openTab(\'home1\',\'首页\', \'/wedding_admin/sys/um/home.html\');" class="nav-link"><i class="fa fa-home fa-fw"></i><span class="title">首页</span></a></li>'];

                datas = [].concat(datas.menulist);
                createMenu(html, datas, true);
                $("#page-sidebar-menu").append(html.join(''));
               // menuItems = convertToLine(datas);
               // searchAutoComplete.setDataSource(menuItems);
            }
        });
    }

    function createMenu(html, datas, top) {

        for (var i = 0; i < datas.length; i++) {
            var data = datas[i];

            html.push('<li class="nav-item">');
            if (data["list"]!=null) {
                html.push('<a href="javascript:;" class="nav-link">');
                html.push('<i class="' + (data["icon"] || 'fa fa-cube') + '"></i>');
                // if(top){
                html.push('<span class="title">' + data["name"] + '</span>');
                // }else {
                //  html.push(data.text);
                //  }
                html.push('<span class="arrow"></span></a><ul class="sub-menu">');
                createMenu(html, data["list"]);
                html.push('</ul>')
            } else if (data["url"]) {
                html.push('<a class="nav-link" id="link_' + data["menuId"] + '" href="javascript:openTab(\'' + data["menuId"] + '\',\'' + data["name"] + '\', \'' + data["url"] + '\')">');
                html.push('<i class="' + (data["icon"] || '') + '"></i>');
                html.push('<span class="title">' +data["name"] + '</span>');
                html.push('</a>')
            }
            html.push('</li>')
        }
    }

    function initTabList() {
        var mainTab = $("#mainTab").data("kendoTabStrip");
        var html = [];
        $.each(mainTab.items(), function (i, v) {
            var tabid = $(v).find("span.k-link").attr("data-tabid");
            if (tabid == "home") {
                html.push('<li><a href="javascript:openTab(\'home\',\'首页\',\'/wedding_admin/sys/um/home.html\')"><span style="padding-right:20px;" ><i class="fa fa-home fa-fw"   style=" margin-right: 10px;" ></i>' + v.textContent + "</span></a></li>");
            } else {
                var data = findByCode(tabid);
                if (!data) {
                    data = {
                        icon: 'fa fa-file',
                        functionCode: tabid,
                        text: v.innerText,
                        url: ''
                    }
                }
                html.push('<li><a href="javascript:;openTab(\'' + data.functionCode + '\',\'' + data.text + '\', \'' + data.url + '\')">');
                html.push('<span style="margin-right:10px;display:block"><i  style=" margin-right: 10px;" class="' + (data.icon || '') + '"></i>' + v.textContent + '</span>')
                html.push('<span data-tabid=' + tabid + ' class="badge badge-danger close-btn">X</span></a></li>');

            }
        });
        $("#tabstrip-menu").html(html.join(''));
    }
    var nav = '0';
    function init() {
        debugger
        loadMenu();
        $("#mainTab").kendoTabStrip({
            height: '100%',
            animation: false,
            closeIcon: true,
            contextMenu: true,
            refresh: function () {
                showTabLoading(true);
            },
            load: function (para) {
                var iframe = para.iframe[0];
                window.autoResizeIframe(iframe.name)
                showTabLoading(false);
            },
            activate: function (obj) {
                $('#page-title').html(obj.item.innerText);
                var id = $(obj.item).find('.k-link').data('tabid');
                var html = [];
                html.push('<li> <a href="javascript:;"  id="page-refresh-button" onclick="refreshPage(this)"><i class="icon-refresh"></i>  刷新</a> </li>');

                if (id != "home") {
                    html.push('<li> <a href="javascript:;"  id="page-addshortCut-button" onclick="addShortcut(\'' + id + '\')"><i class="fa fa-plus-square"></i>  添加快捷方式</a> </li>');
                    html.push('<li><a href="javascript:;" id="page-close-button" onclick="closePage(this)" ><i class="icon-close"></i>  退出</a></li>');
                }
                $("#page-button").html(html.join(''));
                $("#page-close-button").data("tabid", id);
                $("#page-refresh-button").data("tabid", id);
                $('#page-sidebar-menu').find('li.active').removeClass('active');
                $('#link_' + id).parents('li.nav-item').addClass('active');
                if (nav == "Y") {
                 //   initTabStripItems(obj);
                } else {
                    initTabList();
                }

            },
            close: function () {
                if (nav != "Y") {
                    initTabList();
                }
            }

        }).data("kendoTabStrip");
        $("#mainTab").parent().attr("id", "tabstrip-parent");
      //  openTab('home', '首页', '/wedding_admin/sys/um/home.html', false);
        if (nav == "Y") {
            $("#mainTab .k-tabstrip-items").css("display", "inline-block");
            $("#AShortcut").css("display", "block");
        } else {
            $(".page-content-wrapper .page-content .page-head").css("display", "block");
            $("#AShortcut").css("display", "block");
            $("#page-nav").css("display", "block");
        }

    }
</script>
</body>
</html>
